<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-form inline v-model="filter">
              <el-form-item label="">
                  <el-input placeholder="搜索关键字" v-model="filter.name"  prefix-icon="el-icon-search"></el-input>
              </el-form-item>
              <el-form-item label="">
                  <el-button type="primary">查询</el-button>
              </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-col :span="24">
            <el-table :data="tableDatas" border v-loading="isTableLoading">
               <el-table-column label="编号" prop="id" width="50"></el-table-column>
               <el-table-column label="状态" width="70">
                   <template slot-scope="statusCope" align="center">
                       <el-tag v-if="statusCope.row.status==='010'" type="success">
                           开启
                       </el-tag>
                       <el-tag v-else-if="statusCode.row.status==='020'" type="danger">
                           禁用
                       </el-tag>
                   </template>
               </el-table-column>
               <el-table-column label="类型" width="90" align="center"> 
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type==='prod'" type="success">
                            生产
                        </el-tag>
                        <el-tag v-else-if="scope.row.type==='test'" type="warning">
                            测试
                        </el-tag>
                        <el-tag v-else type="danger">
                            准生产
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="前置机IP" prop="frontIp"></el-table-column>
                <el-table-column label="域名" prop="frontDomain" width="250"></el-table-column>
                <el-table-column label="银行标识" prop="bankCode"></el-table-column>
                <el-table-column label="银行名称" prop="remark"></el-table-column>
                <el-table-column label="主体" prop="fmCode"></el-table-column>
                <el-table-column label="客户号" prop="custId" width="200"></el-table-column>
            
                <el-table-column label="操作" width="185">
                    <template slot-scope="delScope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button type="primary"  size="small" icon="el-icon-edit" @click="handleEdit(delScope.$index, delScope.row)" ></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                            <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDel(delScope.$index, delScope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
                            <el-button type="success" icon="el-icon-info" size="small" @click="handleDel(delScope.$index, delScope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <!--分页-->
        <el-col :span="24" style="padding-top:20px">
            <el-pagination :total="total" background="" @current-change="handlerCurrentChange" layout="total,prev,pager,next"></el-pagination>
        </el-col>
        <el-dialog title="编辑" :visible.sync="editDialogFlag" width="45%" >  
            <el-form :model="editForm" label-width="100px" label-suffix="：">
                <el-tabs>
                    <el-tab-pane label="基本信息">
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="前置机IP" prop="frontIp">
                                    <el-input v-model="editForm.frontIp" placeholder="前置机IP"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="前置机域名" prop="frontDomain">
                                    <el-input v-model="editForm.frontDomain" placeholder="前置机域名"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="银行编码" prop="bankCode">
                                    <el-input v-model="editForm.bankCode" placeholder="银行编码"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="主体编码" prop="fmCode">
                                    <el-input v-model="editForm.fmCode" placeholder="主体编码"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="银行名称" prop="remark">
                                    <el-input v-model="editForm.remark" placeholder="remark"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="类型">
                                    <el-radio-group v-model="editForm.type">
                                        <el-radio class="radio" label="prod">生产</el-radio>
                                        <el-radio class="radio" label="dev">准生产</el-radio>
                                        <el-radio class="radio" label="test">测试</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                          </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="参数信息">
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="客户号" prop="custId">
                                    <el-input v-model="editForm.custId" placeholder="客户号"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="签名标识" prop="signFlag">
                                    <el-input v-model="editForm.signFlag" placeholder="签名标识"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="用户ID" prop="userId">
                                    <el-input v-model="editForm.userId" placeholder="用户ID"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="用户密码" prop="userPass">
                                    <el-input v-model="editForm.userPass" placeholder="用户密码"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="FTP地址" prop="ftpHost">
                                    <el-input v-model="editForm.ftpHost" placeholder="FTP地址"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        
                    
                    </el-tab-pane>
                    <el-tab-pane label="连接信息">
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="客户号" prop="custId">
                                    <el-input v-model="editForm.custId" placeholder="客户号"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="签名标识" prop="signFlag">
                                    <el-input v-model="editForm.signFlag" placeholder="签名标识"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="用户ID" prop="userId">
                                    <el-input v-model="editForm.userId" placeholder="用户ID"></el-input>
                                </el-form-item>
                          </el-col>
                          <el-col :span="12">
                                <el-form-item label="用户密码" prop="userPass">
                                    <el-input v-model="editForm.userPass" placeholder="用户密码"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                                <el-form-item label="FTP地址" prop="ftpHost">
                                    <el-input v-model="editForm.ftpHost" placeholder="FTP地址"></el-input>
                                </el-form-item>
                          </el-col>
                        </el-row>
                        
                    
                    </el-tab-pane>
                </el-tabs>
              </el-form>
        </el-dialog>
    </section>
</template>
<script>
import {getParamConfigPageList,delParamConfig} from '@/api/api'

export default {
    data() {
        return {
            filter: {
                name:''
            },
            isTableLoading:false,
            page:1,
            total:0,
            tableDatas:[],
            editDialogFlag: false,
            editForm:{
                id:0,
                frontIp:''
            }

        }
    },
    methods: {
        handleEdit: function(index,row){
            this.editDialogFlag=true;
            this.editForm=Object.assign({},row);
        },
        handleDel: function(index,row){
           this.$confirm('确定要删除吗？','提示',{
               type: 'warning'
           }).then(()=>{
               this.isTableLoading=true;
               let para={id:row.id}
               delParamConfig(para).then(data=>{
                   this.isTableLoading=false;
                  let {code,msg,retData}=data;
                  if(code!=200){
                      this.$message({
                          type:'error',
                          message: msg
                      });
                  }else{
                      this.getParams();
                  }
               });
           });
        },
        handlerCurrentChange: function(val){
            this.page=val;
            this.getParams();
        },
        getParams(){
            let para={
                pageCurrent:this.page,
                name:this.filter.name
            };
             this.isTableLoading=true;
            getParamConfigPageList(para).then(data=>{
                  this.isTableLoading=false;
                  let {code,msg,retData}=data;
                  if(code!=200){
                      this.$message({
                          type:'error',
                          message: msg
                      });
                  }else{
                       this.tableDatas=retData.list;
                       this.total=retData.total;
                  }
            });
        }
    },
    mounted() {
        this.getParams();
    }
}
</script>

